<template>
  <div class="page">
    <div class="top">
      <c-title :hide="false" text="医美中心"></c-title>
    </div>
    <sjrz :name="'医美中心'"></sjrz>
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in pricList" :key="index"><img :src="item.thumb" /></van-swipe-item>
      </van-swipe>

      <div class="top_About">
        <img :src="address.store_thumb" />
        <h3 class="yyName">{{ address.store_name }}</h3>
        <img src="../../assets/images/goods/pull_up@2x.png" class="img" />
        <div class="address">
          {{ address.store_address }}
        </div>
      </div>
      <div class="activity">
        <div><img src="../../assets/images/goods/hd.png" alt=""></div>
      </div>
      <div class="content">
        <div class="text">
          <h3>医美项目</h3>
        </div>
        <van-row>
          <div v-for="(item, index) in ympicList" :key="index" @click="getoneym(item.id)">
            <van-col span="6"><img :src="item.thumb" alt="" /><br />
              <p>{{ item.name }}</p>
            </van-col>
          </div>
        </van-row>
      </div>
      <div class="bottom">
        <div class="text">
          <h3>医美产品</h3>
        </div>

        <van-row>
          <div v-for="(item, index) in ymcpList" :key="index" @click="tiaozhuan(item.id)">
            <van-col span="8"><img :src="item.thumb" alt="" />
              <!-- <p>{{ item.name }}</p>
            <br /> -->

            </van-col>
          </div>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
  import sjrz from "components/sjrz";
  export default {
    components: {
      sjrz
    },
    data() {
      return {
        ympicList: [], //医美产品
        pricList: [], //医美项目
        ymcpList: [], //轮播
        address: {},
      };
    },
    activated() {
      this.getLsit();
      this.getProject();
      this.getaddress();
    },
    methods: {
      getaddress() {
        $http
          .post("plugin.store-cashier.frontend.store.get-store-info.get-stores-details", {
            store_id: 27
          })
          .then(response => {
            this.address = response.data.store_info;
          });
      },
      getLsit() {
        $http
          .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
            category_id: 3
          })
          .then(response => {
            this.pricList = response.json;
          });
      },
      getProject() {
        $http
          .post("plugin.store-cashier.frontend.store.makeup.get-projects", )
          .then(response => {
            this.ympicList = response.data;
            console.log(this.ympicList)
          });
        $http
          .post("plugin.store-cashier.frontend.store.makeup.recommand-goods", {
            category_id: 8
          })
          .then(response => {
            console.log(response)
            this.ymcpList = response.data;
          });

      },
      getoneym(id) {
        console.log(id)
        this.$router.push(this.fun.getUrl("ymList", {}, {
          id
        }));
      },
      tiaozhuan(id) {
        this.$router.push(this.fun.getUrl("goods", {
          id
        }));
      }
    }
  };
</script>
<style scoped lang="scss">
  .my-swipe .van-swipe-item {
    img {
      height: 10rem;
      width: 100%;
    }
  }

  .top_About {
    height: 5rem;
    border-radius: 1rem;
    background-color: #fff;
    margin: 1rem 0.5rem;

    .yyName {
      padding-top: 0.5rem;
    }

    img {
      width: 4rem;
      height: 4rem;
      border-radius: 4rem;
      float: left;
      line-height: 5rem;
    }

    .img {
      width: 1.5rem;
      height: 1.5rem;
      margin: 6% 0% 1% 10%;
    }

    img:fist-child {
      margin: 3% 0% 3% 5%;
    }
  }

  .address {
    font-size: 0.8rem;
    margin-top: 1.5rem;
  }

  .activity {
    img {
      width: 100%;
    }
  }

  .content {
    margin-bottom: 1rem;
  
  img {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
    }

    p {
      width: 5.7rem;
      text-align: center;
    }
  }

  .bottom {
    img {
      width: 6rem;
      height: 6rem;
      margin-top: 1rem;
    }
  }
</style>
